<template>
  <div class="ui-content">
    <div style="position: fixed;left: 0;top: 0;color: red;">{{checkgoodslist}}</div>
    <div class="page_tit flex-between">
      <div>购物车</div>
      <span class="manage">管理</span>
    </div>
    <div class="page_address flex-star">
      <div class="goods_num_box">
        共3件宝贝
      </div>
      <div class="address_box">
        收货地址：重庆市南岸区南城...
      </div>
    </div>
    <div class="goods_box">
      <div class="shop_item" v-for="(item,index) in goods">
        <div class="shop_name flex-between">
          <div class="shop_name_left flex-star">
            <input @click="checkshop(index)" v-model="item.ischeck" type="checkbox" />
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shangcheng"></use>
            </svg>
            <span>{{item.shopname}}</span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-right"></use>
            </svg>
          </div>
        </div>
        <div class="goods_list flex-star" v-for="(goodsitem,goodsindex) in item.goodslist">
          <input @click="checkgoods(index,goodsindex)" v-model="goodsitem.ischeck" type="checkbox" />
          <img :src="goodsitem.goodsimg">
          <div class="good_item_more">
            <div class="wordNoWarp">
              {{goodsitem.goodsname}}
            </div>
            <div class="gui_ge">
              <span v-for="spec in goodsitem.goodsspec">{{spec}}</span>
            </div>
            <div class="flex-between">
              <div class="priceitem_box">￥<span class="goods_price">{{goodsitem.price}}</span></div>
              <div class="opt_box flex-star">
                <div class="reduce" @click="numreduce(index,goodsindex)">-</div>
                <div class="goods_num">{{goodsitem.num}}</div>
                <div class="add" @click="numadd(index,goodsindex)">+</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="page_bottom flex-between">
      <div class="flex-star">
        <input class="check_all" v-model="checkall" @click="claickcheckall" type="checkbox" />
        <span>全选</span>
      </div>
      <div class="flex-star">
        <span>总计:</span>
        <span class="allprice">{{allprice}}</span>
        <input class="page_btn page_btn_act" type="button" name="" id="" value="结算" />
        <input class="page_btn" type="button" name="" id="" value="删除" />
      </div>
    </div>


  </div>
</template>

<script>
  export default {
    data() {
      return {
        checkall: false,
        goods: [{
          ischeck: false,
          shopname: '南方大米官方自营店',
          goodslist: [{
            ischeck: false,
            goodsimg: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599222051671&di=6cd68103c241a811666d629510d6ed73&imgtype=0&src=http%3A%2F%2Fpics1.baidu.com%2Ffeed%2F6159252dd42a28343a670366d77170ee17cebfe6.jpeg%3Ftoken%3D9419ec4135abbe1aa172321cef8eb64a%26s%3DDF30BCE20000AAE610BAF0B60300C04A',
            goodsname: '芳姐卤香干 600g湖南特产武冈 卤豆腐豆干制品休闲素食零...',
            goodsspec: ['包邮', '麻辣'],
            price: '1000.00',
            maxnum: 100,
            num: 1
          }]
        }, {
          ischeck: false,
          shopname: '南方大米官方自营店',
          goodslist: [{
            ischeck: false,
            goodsimg: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599222051671&di=6cd68103c241a811666d629510d6ed73&imgtype=0&src=http%3A%2F%2Fpics1.baidu.com%2Ffeed%2F6159252dd42a28343a670366d77170ee17cebfe6.jpeg%3Ftoken%3D9419ec4135abbe1aa172321cef8eb64a%26s%3DDF30BCE20000AAE610BAF0B60300C04A',
            goodsname: '芳姐卤香干 600g湖南特产武冈 卤豆腐豆干制品休闲素食零...',
            goodsspec: ['包邮', '麻辣'],
            price: '1000.00',
            maxnum: 100,
            num: 1
          }, {
            ischeck: false,
            goodsimg: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599222051671&di=6cd68103c241a811666d629510d6ed73&imgtype=0&src=http%3A%2F%2Fpics1.baidu.com%2Ffeed%2F6159252dd42a28343a670366d77170ee17cebfe6.jpeg%3Ftoken%3D9419ec4135abbe1aa172321cef8eb64a%26s%3DDF30BCE20000AAE610BAF0B60300C04A',
            goodsname: '芳姐卤香干 600g湖南特产武冈 卤豆腐豆干制品休闲素食零...',
            goodsspec: ['包邮', '麻辣'],
            price: '1000.00',
            maxnum: 10,
            num: 1
          }]
        }],
      }
    },
    components: {},
    methods: {
      // 数量加减
      numadd(shopindex, goodsindex) {
        if (this.goods[shopindex].goodslist[goodsindex].num < this.goods[shopindex].goodslist[goodsindex].maxnum) {
          this.goods[shopindex].goodslist[goodsindex].num++;
        }
      },
      numreduce(shopindex, goodsindex) {
        if (this.goods[shopindex].goodslist[goodsindex].num > 1) {
          this.goods[shopindex].goodslist[goodsindex].num--;
        }
      },
      // 单商品勾选
      async checkgoods(shopindex, goodsindex) {
        let length = 0;
        let length2 = 0;
        this.goods[shopindex].goodslist[goodsindex].ischeck = !this.goods[shopindex].goodslist[goodsindex].ischeck;
        this.goods[shopindex].goodslist.forEach(item => {
          if (item.ischeck) {
            length++
          }
        })
        if (this.goods[shopindex].goodslist.length == length) {
          this.goods[shopindex].ischeck = true;
        } else {
          this.goods[shopindex].ischeck = false;
        }

        this.goods.forEach(item => {
          if (item.ischeck) {
            length2++;
          }
        })

        if (this.goods.length === length2) {
          this.checkall = true
        } else {
          this.checkall = false
        }

      },
      // 商店勾选
      async checkshop(shopindex) {
        this.goods[shopindex].ischeck = !this.goods[shopindex].ischeck;
        if (this.goods[shopindex].ischeck) {
          this.goods[shopindex].goodslist.forEach(item => {
            item.ischeck = true;
          })
        } else {
          this.goods[shopindex].goodslist.forEach(item => {
            item.ischeck = false;
          })
        }

        let length = 0;

        this.goods.forEach(item => {
          if(item.ischeck){
            length++;
          }
        })

        if(length === this.goods.length){
          this.checkall = true;
        }else{
          this.checkall = false;
        }

      },
      // 全选
      claickcheckall() {
        if (!this.checkall) {
          this.goods.forEach(item => {
            item.ischeck = true;
            item.goodslist.forEach(goodsitem => {
              goodsitem.ischeck = true;
            })
          })
        } else {
          this.goods.forEach(item => {
            item.ischeck = false;
            item.goodslist.forEach(goodsitem => {
              goodsitem.ischeck = false;
            })
          })
        }
      }
    },
    computed: {
      // 计算总价
      allprice() {
        let price = 0;
        this.goods.forEach(item => {
          item.goodslist.forEach(goodsitem => {
            if (goodsitem.ischeck) {
              price += goodsitem.price * goodsitem.num;
            }
          })
        })
        return "￥" + price.toFixed(2);
      },
      // 统计勾选商品
      checkgoodslist(){
        let calcheckgoods = [];
        this.goods.forEach(item => {
          item.goodslist.forEach(goodsitem => {
            if(goodsitem.ischeck){
              calcheckgoods.push(goodsitem);
            }
          })
        })
        console.log(calcheckgoods)
        return calcheckgoods;
      }
    }
  }
</script>

<style scoped="scoped">
  .page_tit {
    height: 1rem;
    padding: 0 .24rem;
    color: #333;
  }

  .page_tit div {
    font-size: .36rem;
    font-weight: bold;
    color: #333;
  }

  .page_address {
    height: .3rem;
    font-size: .24rem;
    padding: 0 .24rem;
    margin-bottom: .2rem;
  }

  .address_box {
    margin-left: .2rem;
  }


  .goods_box {
    color: #333;
    height: calc(100vh - 3.8rem);
    overflow-y: scroll;
  }

  .goods_list {
    padding: .2rem;
  }

  .goods_list img {
    width: 1.8rem;
    height: 1.8rem;
    margin: 0 .15rem;
    border-radius: 5px;
  }

  .good_item_more {
    width: calc(100% - 2.8rem);
    height: 1.8rem;
  }

  .good_item_more .wordNoWarp {
    -webkit-line-clamp: 2;
  }

  .priceitem_box {
    color: #14aad1;
    font-weight: bold;
  }

  .goods_price {
    font-size: .34rem;
  }

  .opt_box div {
    width: .4rem;
    height: .4rem;
    border: 1px solid #999;
    text-align: center;
    line-height: .4rem;
    border-radius: 4px;
  }

  .opt_box div:nth-child(2) {
    border: none;
    width: .5rem;
    text-align: center;
  }

  .opt_box div:nth-child(3) {
    background: #14aad1;
    color: white;
    border: none;
  }

  .shop_item {
    margin: 0 .24rem 0 .24rem;
    border-radius: 8px;
    overflow: hidden;
    background: white;
  }

  .goods_box .shop_item:nth-child(n + 2) {
    margin-top: .2rem;
  }

  .shop_name {
    border: 1px solid #f2f2f2;
    padding: .2rem;
  }

  .goods_box {
    border-radius: 8px;
  }

  .page_bottom {
    background: white;
    position: fixed;
    bottom: 1.06rem;
    left: 0;
    padding: .15rem .25rem;
    width: 100%;
  }

  .page_btn {
    display: none;
    width: 2.8rem;
    height: .8rem;
    border-radius: .8rem;
    background: linear-gradient(to right, #ff8506, #f86108);
    border: none;
    color: white;
    font-size: .32rem;
  }

  .page_btn_act {
    display: block;
  }

  .allprice {
    color: #14aad1;
    margin-right: .2rem;
    font-size: .36rem;
  }

  .shop_name svg:nth-child(2) {
    margin-right: .1rem;
  }

  .address_box a {
    color: #aaa;
  }

  .gui_ge {
    padding: .1rem 0;
  }

  .gui_ge span {
    display: inline-block;
    font-size: .1rem;
    color: #999;
  }

  .gui_ge span:nth-child(n + 2)::before {
    content: ";";
  }

  .shop_name_left {
    color: #999;
  }
</style>
